<template>
	<view class="detail-container">
		<view class="page-header">
			<text class="page-title">内置组件暗黑模式演示</text>
		</view>

		<view class="demo-section">
			<text class="section-title">Button 按钮</text>
			<view class="button-group">
				<button type="default">默认按钮</button>
				<button type="primary">主要按钮</button>
				<button type="warn">警告按钮</button>
				<button plain type="primary">镂空按钮</button>
				<button disabled>禁用按钮</button>
				<button size="mini" type="primary">小按钮</button>
			</view>
		</view>

		<view class="demo-section">
			<text class="section-title">Switch 开关</text>
			<view class="switch-group">
				<view class="switch-item">
					<text class="label">默认开关</text>
					<switch :checked="switch1" @change="switchChange1" />
				</view>
				<view class="switch-item">
					<text class="label">自定义颜色</text>
					<switch :checked="switch2" @change="switchChange2" color="#ff5722" />
				</view>
				<view class="switch-item">
					<text class="label">禁用状态</text>
					<switch disabled />
				</view>
			</view>
		</view>

		<view class="demo-section">
			<text class="section-title">Slider 滑块</text>
			<view class="slider-group">
				<view class="slider-item">
					<text class="label">默认滑块 ({{ sliderValue1 }})</text>
					<slider :value="sliderValue1" @change="sliderChange1" />
				</view>
				<view class="slider-item">
					<text class="label">步长为10 ({{ sliderValue2 }})</text>
					<slider :value="sliderValue2" @change="sliderChange2" step="10" show-value />
				</view>
				<view class="slider-item">
					<text class="label">自定义颜色</text>
					<slider activeColor="#4cd964" backgroundColor="#e5e5e5" />
				</view>
			</view>
		</view>

		<view class="demo-section">
			<text class="section-title">Input 输入框</text>
			<view class="input-group">
				<input class="input-item" placeholder="请输入文本" v-model="inputValue1" />
				<input class="input-item" placeholder="密码输入" password v-model="inputValue2" />
				<input class="input-item" placeholder="数字输入" type="number" v-model="inputValue3" />
				<input class="input-item" placeholder="禁用状态" disabled />
			</view>
		</view>

		<view class="demo-section">
			<text class="section-title">Checkbox 复选框</text>
			<checkbox-group @change="checkboxChange">
				<label class="checkbox-item">
					<checkbox value="option1" :checked="true" />
					<text class="checkbox-label">选项 1</text>
				</label>
				<label class="checkbox-item">
					<checkbox value="option2" />
					<text class="checkbox-label">选项 2</text>
				</label>
				<label class="checkbox-item">
					<checkbox value="option3" disabled />
					<text class="checkbox-label">禁用选项</text>
				</label>
			</checkbox-group>
		</view>

		<view class="demo-section">
			<text class="section-title">Radio 单选框</text>
			<radio-group @change="radioChange">
				<label class="radio-item">
					<radio value="radio1" :checked="true" />
					<text class="radio-label">单选项 1</text>
				</label>
				<label class="radio-item">
					<radio value="radio2" />
					<text class="radio-label">单选项 2</text>
				</label>
				<label class="radio-item">
					<radio value="radio3" disabled />
					<text class="radio-label">禁用单选项</text>
				</label>
			</radio-group>
		</view>

		<view class="demo-section">
			<text class="section-title">Progress 进度条</text>
			<view class="progress-group">
				<view class="progress-item">
					<text class="label">默认进度条</text>
					<progress :percent="30" show-info />
				</view>
				<view class="progress-item">
					<text class="label">自定义颜色</text>
					<progress :percent="60" activeColor="#ff5722" />
				</view>
				<view class="progress-item">
					<text class="label">动态进度 ({{ progressValue }}%)</text>
					<progress :percent="progressValue" activeColor="#4cd964" />
				</view>
			</view>
		</view>

		<view class="demo-section">
			<text class="section-title">Picker 选择器</text>
			<view class="picker-group">
				<picker mode="selector" :range="pickerArray" @change="pickerChange">
					<view class="picker-item">
						<text class="label">单列选择器</text>
						<text class="value">{{ pickerArray[pickerIndex] }}</text>
					</view>
				</picker>
				<picker mode="date" :value="dateValue" @change="dateChange">
					<view class="picker-item">
						<text class="label">日期选择器</text>
						<text class="value">{{ dateValue }}</text>
					</view>
				</picker>
				<picker mode="time" :value="timeValue" @change="timeChange">
					<view class="picker-item">
						<text class="label">时间选择器</text>
						<text class="value">{{ timeValue }}</text>
					</view>
				</picker>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			switch1: true,
			switch2: false,
			sliderValue1: 50,
			sliderValue2: 30,
			inputValue1: '',
			inputValue2: '',
			inputValue3: '',
			radioValue: 'radio1',
			progressValue: 75,
			pickerArray: ['选项1', '选项2', '选项3', '选项4'],
			pickerIndex: 0,
			dateValue: '2025-11-07',
			timeValue: '12:00'
		}
	},
	methods: {
		switchChange1(e) {
			this.switch1 = e.detail.value;
		},
		switchChange2(e) {
			this.switch2 = e.detail.value;
		},
		sliderChange1(e) {
			this.sliderValue1 = e.detail.value;
		},
		sliderChange2(e) {
			this.sliderValue2 = e.detail.value;
		},
		checkboxChange(e) {
			console.log('checkbox发生change事件:', e.detail.value);
		},
		radioChange(e) {
			console.log('radio发生change事件:', e.detail.value);
		},
		pickerChange(e) {
			this.pickerIndex = e.detail.value;
		},
		dateChange(e) {
			this.dateValue = e.detail.value;
		},
		timeChange(e) {
			this.timeValue = e.detail.value;
		}
	}
}
</script>

<style lang="scss" scoped>
.detail-container {
	min-height: 100vh;
	background-color: var(--page-bg);
	padding: 20px;
}

.page-header {
	margin-bottom: 20px;
}

.page-title {
	font-size: 24px;
	font-weight: bold;
	color: var(--text-primary);
}

.demo-section {
	background-color: var(--card-bg);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.section-title {
	display: block;
	font-size: 16px;
	font-weight: bold;
	color: var(--text-primary);
	margin-bottom: 16px;
}

.button-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.switch-group {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.switch-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.label {
	font-size: 14px;
	color: var(--text-primary);
}

.slider-group {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.slider-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.input-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.input-item {
	background-color: var(--input-bg);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 12px;
	font-size: 14px;
	color: var(--text-primary);
}

.input-item::placeholder {
	color: var(--text-secondary);
}

.checkbox-item {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

.checkbox-label {
	margin-left: 8px;
	font-size: 14px;
	color: var(--text-primary);
}

.radio-item {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

.radio-label {
	margin-left: 8px;
	font-size: 14px;
	color: var(--text-primary);
}

.progress-group {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.progress-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.picker-group {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background-color: var(--border-color);
	border-radius: 8px;
	overflow: hidden;
}

.picker-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--input-bg);
	padding: 12px 16px;
}

.value {
	font-size: 14px;
	color: var(--text-secondary);
}
</style>
